<template>
	<!-- 音乐的展示页面 -->
	<view class="content" >
		<!-- 图片 -->
		<view class="content">
			<view class="status-bar"></view>
			<!-- header -->
			<view class="player-header">
				<text class="player-header-icon text-white cuIcon-back" @tap="goBack"></text>
				<view class="player-header-title">
					<view class="title-name">
						黄昏
					</view>
					<view class="title-msg">
						周传雄
					</view>
				</view>
				<text class="player-header-share text-white cuIcon-share"></text>
			</view>
			<!-- videodisc -->
			<view class="player-videodisc">
				<image class="rotateImg" src="../../img/薛之谦.png" mode=""></image>
			</view>
			<!-- optBar -->
			<view class="play-opt-bar">
				<view class="" v-for="(item, index) in optList" :key="index">
					<text class="text-white" :class="item.icon"></text>
				</view>
		
			</view>
			<!-- slider -->
			<view class="player-slider">
				<!-- playbar -->
				<playMuiscComs  default='#169af3'  continue :src="audio[now]" :duration="audio[now].duration" @prev="now = now === 0?audio.length-1:now-1"
				 @next="next">
				 	<rich-text :nodes="name[now].geci" class="text-center" slot="content"></rich-text>
				 </playMuiscComs>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	// http://music.163.com/song/media/outer/url?id=190072.mp3
	// src: String, //音频链接
	// autoplay: Boolean, //是否自动播放
	// looping: Boolean, //是否循环播放
	// continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
	// control: {
	// 	type: Boolean,
	// 	default: true
	// }, //是否需要上一曲/下一曲按钮
	// color: {
	// 	type: String,
	// 	default: '#169af3'
	// } //主色调
	// import {SingerHot} from '../../api/singer.js'
	import playMuiscComs from '@/components/playMuiscComs/playMuiscComs.vue'
	import {getMusicM3} from '@/api/index.js'
	
	/*
	  传过来当前所有数据的列表
	  传过来当前的进度
	  传过来当前播放音乐的下标，因为切换下一首要下标加一
	  
	*/ 
	export default {
		data() {
			return {
				musicData:[],
				id:0,
				list:{},
					optList:[{
							'id': 0,
							'icon': 'cuIcon-like'
						},{
							'id': 1,
							'icon': 'cuIcon-down'
						},{
							'id': 2,
							'icon': 'cuIcon-notice'
						},{
							'id': 3,
							'icon': 'cuIcon-message'
						},{
							'id': 4,
							'icon': 'cuIcon-moreandroid'
						},
					],
					duration: '100',
					currentTime: '0',
					chDuration: ['0', '00'],
					chCurrentTime: ['0', '00'],
					ifPlay: false,
				"name": [{
					id: 1,
					title: '1.Catch the Moment刀剑神域 序列之争',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 2,
					title: '2.昼夜 - 樱花樱花想见你 - 钢琴版',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 3,
					title: '3.Otokaze - 夏恋',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 4,
					title: '4.Raujika - City of Twilight',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 5,
					title: '5.V.A. - 鸟之诗 - 八音盒版',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 6,
					title: '6.闫东炜 - 夏野与暗恋',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 7,
					title: '7.アッチョリケ - キミを思うメロディー',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 8,
					title: '8.Cymophane - Tassel',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, {
					id: 9,
					title: '9.Anan Ryoko - Refrain',
					geci: '纯音乐，无歌词',
					isShow: true,
				}, ],
				now:0,
				audio: [
					'http://m801.music.126.net/20220405192635/a17ae87f183730900ab24f14c4440a2c/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/11353262648/a304/78bb/3d4d/cea1ff6539f885a031d5aa2f64722f7c.mp3'
					// 'http://music.163.com/song/media/outer/url?id=190072.mp3',
					// 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/a16492d0-134b-11eb-899d-733ae62bed2f.mp3',
				],
				autoplay:true
			}
		},
		onLoad(e) {
          // this.musicData = 
		  // getMusicM3(1889194892).then(res =>{
			 //  let mp3 = res.data.data[0]
			 //  console.log(mp3.url);
			 //  console.log(mp3);
			 //  this.audio[0] = mp3.url
		  // })
		},
		methods: {
           next(){
			   this.now = this.now === this.audio.length-1?0:this.now+1
		   }
		},
		comments:{
			playMuiscComs
		}
	}
</script>

<style lang="scss">
	.text-center{
		padding: 10rpx;
	}
	.aa{
		 width: 100%;
		 height: 200px;
		 background-size: 100% 100%;
	}
	.rotateImg{
		border-radius: 100%;
	}
		/* 动画 */
	.rotateImg{  
	    display: block;
	    animation: rotate 6s linear infinite;
	}  
	@keyframes rotate{
		0%{
			transform: rotateZ(0deg);/*从0度开始*/
		}
		100%{
			transform: rotateZ(360deg);/*360度结束*/
		}
	}
	.content{
		background-image: linear-gradient(to bottom,#1e6997, #af946a, #1e6997);
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}
	.status-bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.player-header{
		width: 100%;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
	}
	.player-header-icon{
		width: 54upx;
		font-size: 26px;
		margin-left: 25upx;
	}
	.player-header-share{
		width: 54upx;
		font-size: 26px;
		margin-right: 25upx;
	}
	.player-header-title{
		height: 100%;
		flex: 1;
		padding: 0 40upx;
	}
	.player-header-title .title-name{
		font-size: 18px;
	}
	.player-header-title .title-msg{
		font-size: 12px;
		color: #d0d0d0;
	}
	.player-videodisc{
		width: 420rpx;
		height: 420rpx;
	}
	.player-videodisc image{
		width: 100%;
		height: 100%;
		margin-top: 70rpx;
	}
	.play-opt-bar{
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70upx;
		font-size: 34px;
		position: absolute;
		bottom: 320upx;
	}
	.player-slider{
		width: 650upx;
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 220upx;
	}
	.player-slider .player-currentTime,
	.player-slider .player-duration{
		width: 20upx;
		height: 100%;
		font-size: 10px;
		color: #c1c1c1;
		line-height: 44upx;
	}
	
	.play-bar{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70upx;
		font-size: 30px;
		position: absolute;
		bottom: 80upx;
	}
	.play-menu{
		width: 100upx;
		height: 100upx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		text-align: center;
		line-height: 100upx;
	}
</style>
